﻿
<template>
  <div class="Detail_Excahnge_contain" ref="Detail_Excahnge_contain">
    <div class="Detail_header">
      官方兑换
      <!--<div class="Detail_goBack" v-on:click="hide_detail">
        <img src="../../static/img/goback_detail.png">
      </div>-->
    </div>
    <div class="top_nav_Scroll">
      <Detail img="list_d.images" :childMsg="img_list_test"></Detail>
    </div>
    <div class="div_middle clearfix">
      <div class="div_middle_left">
        积分 <span>{{list_d.integral}}</span>
      </div>
      <img src="../../../static/img/nav_fenhao.png" alt="Alternate Text" class="fenhao_img" v-on:click="show_alert" />
      <div class="div_middle_right">需赞数 {{list_d.maxPoint}}</div>
    </div>
    <div class="wrap_iscroll_view">
      <scroller class="clearfix">
        <div class="inner_story_bottom_title">{{list_d.postName}}</div>
        <div class="inner_story_list" v-html="list_d.postContent">
          <!--<p>诗经123456</p>
          <p>
            诗经》是中国古代诗歌开端
          </p>
          <p> 最早的一部诗歌总集。</p>
          <p> 诗经收集了西周初年至春秋中叶</p>
          <p>（前11世纪至前6世纪）的诗歌，</p>
          <p>共311篇，其中6篇为笙诗，即只有标题，</p>
          <p>没有内容，称为笙诗六篇</p>
          <p>诗经收集了西周初年至春秋中叶</p>
          <p>（前11世纪至前6世纪）的诗歌，</p>
          <p>共311篇，其中6篇为笙诗，即只有标题，</p>
          <p>没有内容，称为笙诗六篇.</p>
          <p> 诗经收集了西周初年至春秋中叶</p>
          <p>（前11世纪至前6世纪）的诗歌，</p>
          <p>共311篇，其中6篇为笙诗，即只有标题，</p>
          <p>没有内容，称为笙诗六篇</p>
          <p>诗经收集了西周初年至春秋中叶</p>
          <p>（前11世纪至前6世纪）的诗歌，</p>
          <p>共311篇，其中6篇为笙诗，即只有标题，</p>
          <p>没有内容，称为笙诗六篇.</p>
          <p class="bottom_10">&nbsp;</p>
          <p class="bottom_10">&nbsp;</p>-->
        </div>
      </scroller>
    </div>
    <div class="Detail_bottom">
      <!-- 点赞 s -->
      <!--<div class="d_b_f pad_l_5">
        <img v-bind:src="dz_src" class="my_exchange_good " v-on:click="dianz">
        <span class="num_b"> {{list_d.nowPoint}}</span>
      </div>-->
      <!-- 点赞 e -->
      <!--<div class="d_b_f " style="opacity:0">
        <img src="../../static/img/my_gift_tale.png" class="my_exchange_good">
        <span class="num_b"> 689</span>
      </div>-->
      <!-- 分享 s -->
      <div class="d_b_f">
        <img src="../../../static/img/my_gift_last.png" class="my_exchange_good" v-on:click="share_show">
        <!--<span class="num_b"> {{list_d.shareTimes}}</span>-->
      </div>
      <!-- 分享 e-->
      <div class="certain_btn_d">
        兑换
      </div>
    </div>
    <div class="show_box_mask" v-show="mask_show" v-on:click.self="mask_hide">
      <div class="show_box">
        <div class="show_box_header">
          <p>我的积分：{{user_msg.integral}}</p>
          <!--<p class="cz_btn">充值</p>-->
        </div>
        <div class="show_box_main">
          <p class="show_box_main_title">
            兑换数量
          </p>
          <div class="wrap_count">
            <div class="count_p" v-on:click="plus">+</div>
            <div class="count_show">{{count}}</div>
            <div class="count_r" v-on:click="reduce">-</div>
          </div>
        </div>
        <div class="show_box_bottom">
          <p class="need_fen">所需积分{{need_count}}</p>
          <p class="certain_btn_show_box" v-on:click="certain_btn_mess">确认</p>
        </div>
      </div>
    </div>
    <!-- share mask s -->
    <div class="share_mask" v-show="share_mask_show" v-on:click="share_close">
      <div class="share_w">
        点击分享哦<br />
        (｡・`ω´･)
      </div>
      <div class="wrap_arrow_share">
        <div class="arrow_share"></div>
        <div id="triangle-up"></div>
      </div>
    </div>
    <!-- share mask e -->
  </div>
</template>

<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  //limit_Scroll
  import limit_scroll from "../../../static/js/limit_scroll.js"
  import Detail from "./Detail_nav.vue"
  import { Toast, Indicator, MessageBox } from 'mint-ui';
  import qs from 'qs';
  import "../../filter/filter.js";
  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        show_layer: false,
        get_layer_show: this.$store.getters.get_layer_show,
        list_d: "",
        count: 0,
        need_count: 0,
        mask_show: false,
        content_wenh: "",
        img_list: {
          list: []
        },
        img_list_test: {
          list: [1, 1, 1]
        },
        PostId: "",
        user_msg: "",
        hide_up: false,
        share_mask_show: false,
        dz_src: "http://wx.yizhiweimeng.com/static/static/img/my_exchange_good.png"
      }
    },
    beforeCreate: function () {
    
    },
    mounted: function () {
      console.log("ssssssssssssssssssssssssss")
      Indicator.open();
      let ajax_list;
      //let user_id = sessionStorage.getItem("user_id")
      //let id = sessionStorage.getItem("off_post_id");
      //[0]是用户id [1]是 商品id
      let user_id = sessionStorage.getItem("user_id");
      let p_id = sessionStorage.getItem("off_post_id");

      //let all_id = location.search.replace("?all_id=", '').split("@@")
      // let user_id = all_id[0]
      //let id = all_id[1]
      //this.PostId = id
      this.$http.all(
        [
          this.$http.get('/yizhiweimen/api/user/tokenExchange/getOfficialpostById?id=' + p_id),
          //this.$http.get('/api/user/getUserById?id=' + user_id)
        ]
      )
      .then(this.$http.spread((offical) => {
          // 上面两个请求都完成后，才执行这个回调方法
          Indicator.close();
          //if (offical.data == null || user_msg.data == "") {
          //  this.hide_up = true;
          //} else {
          //  this.user_msg = user_msg.data
          //}
          console.log("data--__________________--")
          console.log(offical.data)
          this.list_d = offical.data;
        }))
        .catch((thrown) => {
          console.log(thrown)
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        })

      //微信分享配置
      //获取当前 url
      let url = location.href;
      url = url.split("#")[0]
      Indicator.open();
      //获取分享配置
      this.$http.post('/yizhiweimen/api/wxUtil/getSign',
        qs.stringify(
          {
            "url": url
          })
      )
        .then((e) => {
          // 上面两个请求都完成后，才执行这个回调方法
          Indicator.close();
          let data = e.data
          let link = location.href;
          let post_name = this.list_d.postName
          let img = this.list_d.images
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名，见附录1
            jsApiList: ["onMenuShareTimeline"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
          wx.onMenuShareTimeline({
            title: post_name, // 分享标题
            link: link, // 分享链接，该链接域名必须与当前企业的可信域名一致
            imgUrl: img, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
              console.log("success++++++++")
              //api / user / tokenExchange / addShareTimes
              this.$http.post('/api/user/tokenExchange/addShareTimes',
                qs.stringify(
                  {
                    'officialId': sessionStorage.getItem("off_post_id"),
                  })
              )
                .catch(() => {
                  Toast({
                    message: "网络出错",
                    position: 'bottom',
                    duration: 2000
                  });
                })
                .then((e) => {
                  // 上面两个请求都完成后，才执行这个回调方法
                  Indicator.close();
                  //if(e.data == )
                  if (e.data == "分享成功") {
                    this.list_d.shareTimes = this.list_d.shareTimes + 1;
                  }
                  Toast({
                    message: e.data,
                    position: 'bottom',
                    duration: 2000
                  });
                })
            },
            cancel: function () {

              // 用户取消分享后执行的回调函数
            }
          });
        })
        .catch((e) => {

          //Toast({
          //  message: "网络出222错",
          //  position: 'bottom',
          //  duration: 2000
          //});
        })
    },
    methods: {
      //分享show
      share_show: function () {
        this.share_mask_show = true
      },
      //分享close
      share_close: function () {
        this.share_mask_show = false
      },
      dianz: function () {
        //[0]是用户id [1]是 商品id
        //let all_id = location.search.replace("?all_id=", '').split("@@")
        //let user_id = all_id[0]
        //let pid = add_id[1];
        Indicator.open();
        this.$http.post('/api/user/tokenExchange/GiveThethumbsUp',
          qs.stringify(
            {
              'Uid': user_id,
              'Pid': pid,
            })
        )
          .then((e) => {
            // 上面两个请求都完成后，才执行这个回调方法
            Indicator.close();
            //if(e.data == )
            if (e.data == '点赞成功！') {
              this.dz_src = "http://wx.yizhiweimeng.com/static/static/img/al_click_dz.png"
              this.list_d.nowPoint = this.list_d.nowPoint + 1;
            } else {
              this.dz_src = "http://wx.yizhiweimeng.com/static/static/img/my_exchange_good.png"
              this.list_d.nowPoint = this.list_d.nowPoint - 1;
            }
            this.mask_show = false;
            Toast({
              message: e.data,
              position: 'bottom',
              duration: 2000
            });
          }).catch(() => {
            Toast({
              message: "网络出错",
              position: 'bottom',
              duration: 2000
            });
          })
      },
      certain_btn_mess: function () {
        let user_id = sessionStorage.getItem("user_id");
        if (this.count == 0) {
          Toast({
            message: '兑换数量为0',
            position: 'bottom',
            duration: 2000
          });
          return;
        } else if (user_id == "") {
          Toast({
            message: '用户id为空',
            position: 'bottom',
            duration: 2000
          });
          return;
        }
        Indicator.open();
        this.$http.post('/api/user/tokenExchange/exchangePost',
          qs.stringify(
            {
              'user.id': user_id,
              'officialpost.id': sessionStorage.getItem("off_post_id"),
              quantity: this.count
            })
        )
          .then((e) => {
            console.log(e.data)
            // 上面两个请求都完成后，才执行这个回调方法
            Indicator.close();

            Toast({
              message: e,
              position: 'bottom',
              duration: 2000
            });
          })
      },
      show_alert: function () {
        MessageBox.alert(this.list_d.condition, '提示');
      },
      plus: function () {
        this.count += 1;
        this.need_count = this.list_d.integral * this.count;
      },
      reduce: function () {
        if (this.count == 0) return;
        this.count -= 1;
        this.need_count = this.list_d.integral * this.count;
      },
      hide_detail: function () {
        window.removeEventListener('popstate', function () {
          history.pushState(null, null, document.URL);
        });
        this.$emit('hide_detail')
      },
      show_mask: function () {
        this.mask_show = true
      },
      mask_hide: function () {
        this.mask_show = false;
      }
    },
    components: {
      Detail
    }
  }
</script>

<style scoped>
  /*点赞s*/
  .dianzan_act {
    background-image: url("../../../static/img/al_click_dz.png");
  }
  /*点赞e*/
  /*share mask s*/
  .wrap_arrow_share {
    position: relative;
  }

  #triangle-up {
    width: 0;
    height: 0;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-bottom: 1rem solid #ffbc85;
    position: absolute;
    right: 9%;
    top: 0.9rem;
    transform: rotate(30deg)
  }

  .arrow_share {
    width: 1rem;
    height: 6rem;
    background-color: #ffbc85;
    position: absolute;
    top: 1rem;
    right: 20%;
    transform: rotate(30deg);
  }

  .share_w {
    font-size: 1.5rem;
    text-align: center;
    top: 33%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    color: #fff;
  }

  .share_mask {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    line-height: 1.2;
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
  }
  /*share mask e*/
  .show_box_bottom {
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
    margin-top: 0.9rem;
  }

  .certain_btn_show_box {
    padding: 0.35rem 6vw;
    margin-right: 5%;
    background-color: #e54d4c;
    text-align: center;
    color: #fff;
    font-size: 0.7rem;
    border-radius: 1vw;
    margin-top: -0.2em;
  }

  .need_fen {
    color: #c97b3d;
    margin-left: 5%;
  }

  .show_box_main {
    border-bottom: 1px solid #d5d5d5;
    padding-bottom: 1.95rem;
  }

  .wrap_count div {
    text-align: center;
    height: 1.5rem;
    line-height: 1.5rem;
  }

    .wrap_count div:nth-child(1) {
      border-right: 2px solid #c36b2b;
      width: 6vw;
    }

    .wrap_count div:nth-child(3) {
      width: 6vw;
      border-left: 2px solid #c36b2b;
    }

    .wrap_count div:nth-child(2) {
      width: 16vw;
    }

  .wrap_count {
    border-radius: 1vw;
    width: 30vw;
    border: 2px solid #c36b2b;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .show_box_main_title {
    color: #c57337;
    font-size: 0.8rem;
    margin-top: 0.75rem;
    margin-bottom: 1.2rem;
    font-weight: 600;
  }

  .show_box_header {
    height: 1.85rem;
    line-height: 1.85rem;
    background-color: #f38001;
    font-size: 1rem;
    color: #fff;
    border-radius: 2vw 2vw 0 0;
  }

  .cz_btn {
    float: right;
    margin-right: 5%;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    padding: 0 2%;
    border: 1px solid #fff
  }

  .show_box_mask {
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
  }

  .show_box {
    margin: 3.75rem auto 0;
    width: 88%;
    height: 10.85rem;
    background-color: #fff;
    border-radius: 2vw;
    z-index: 999;
  }

  .pad_l_5 {
    padding-left: 5%;
  }

  .certain_btn_d {
    text-align: center;
    line-height: 2.6;
    color: #fff;
    width: 35%;
    height: 100%;
    background-color: #d4d3d3;
  }

  .num_b {
    vertical-align: bottom;
    line-height: 1;
    margin-top: 0.3rem;
  }

  .d_b_f {
    margin-top: 0.67rem;
    width: 13.3%;
    font-size: 0.7rem;
    color: #b4b4b4;
    display: flex;
    margin-left:10vw;
    justify-content: space-between
  }

  .my_exchange_good {
    width: 5.7vw;
    display: block;
    height: 1rem;
  }

  .Detail_bottom {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
  }

  .scroll-view {
    /* -- Attention: This line is extremely important in chrome 55+! -- */
    touch-action: none;
    /* -- Attention-- */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }

  .wrap_iscroll_view {
    position: relative;
    height: 14rem;
  }

  .bottom_10 {
    margin-bottom: 0.75rem;
  }

  .Detail_bottom {
    height: 2.5rem;
    box-shadow: 0 -2px 8px 1px rgba(128, 128, 128, 0.13);
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0
  }
  /*story_bottom_title*/
  .inner_story_bottom_title {
    width: 30%;
    margin: 0 auto;
    margin-top: 0.7rem;
    margin-bottom: 0.9rem;
    position: relative;
    color: #9f5c2f;
    font-size: 1rem;
  }

    .inner_story_bottom_title:after {
      content: " ";
      display: block;
      width: 0.3rem;
      height: 0.3rem;
      border-radius: 50%;
      background-color: #9f5c2f;
      position: absolute;
      top: 50%;
      left: 0%;
      transform: translateY(-50%)
    }

    .inner_story_bottom_title:before {
      content: " ";
      display: block;
      width: 0.3rem;
      height: 0.3rem;
      border-radius: 50%;
      background-color: #9f5c2f;
      position: absolute;
      top: 50%;
      right: 0%;
      transform: translateY(-50%)
    }
  /*scroll s*/
  body {
    /* On modern browsers, prevent the whole page to bounce */
    overflow: hidden;
  }

  #wrapper2 {
    position: relative;
    width: 100%;
    height: 12rem;
    overflow: hidden;
    /* Prevent native touch events on Windows */
    -ms-touch-action: none;
    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
  }

  .inner_story_list {
    font-size: 0.7rem;
    color: #b16a3b;
    line-height: 2;
  }

  #scroller2 {
    width: 100%;
    position: absolute;
    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
  /*certain btn e*/
  /*scroll e*/

  /*contaienr s*/
  .Detail_Excahnge_contain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: #fff;
  }
  /*container e*/

  /*Detail_header s*/
  .Detail_header {
    height: 1.75rem;
    line-height: 2.4;
    background-color: #fff;
    text-align: center;
    color: #9f5c2f;
    font-size: 0.8rem;
    font-weight: 600;
    position: relative;
    box-shadow: 0 2px 6px 2px #c7c2c2;
  }

  .Detail_goBack {
    width: 5.5%;
    position: absolute;
    left: 3%;
    top: 0.4rem;
  }

    .Detail_goBack img {
      width: 100%;
      display: block;
    }

  .top_nav_Scroll {
    width: 100%;
  }

  .div_middle {
    height: 1.75rem;
    line-height: 2.6;
    font-size: 0.75rem;
    color: #9f5c2f;
    background-color: #fff;
    box-shadow: 0 2px 8px 2px rgba(128, 128, 128, 0.51);
  }

  .div_middle_left {
    float: left;
    padding-left: 5%;
  }

  .div_middle_right {
    float: right;
  }

  .fenhao_img {
    float: right;
    width: 6.4%;
    margin-top: 0.2rem;
    margin-right: 4%;
    margin-left: 4%;
  }

  .story_bottom {
    height: 12rem;
    margin-top: 0.2rem;
    overflow: scroll;
  }

  .story_title {
    height: 3rem;
  }
  /*Detail_header e*/
</style>